<template>
  <van-swipe
    :autoplay="3000"
    indicator-color="white"
    class="topck-banner-swipe"
  >
    <van-swipe-item
      v-for="item in topckBannerList"
      :key="item.BannerImg"
    >
      <img
        :src="item.BannerImg"
        class="banner-img"
        @click="onBannerClick(item.BannerUrl)"
      >
    </van-swipe-item>
  </van-swipe>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      topckBannerList: [
        {
          BannerImg: require('assets/home/banner-1.jpg'),
          BannerUrl: '',
        },
        {
          BannerImg: require('assets/home/banner-2.jpg'),
          BannerUrl: '',
        },
        {
          BannerImg: require('assets/home/banner-3.jpg'),
          BannerUrl: '',
        },
        {
          BannerImg: require('assets/home/banner-4.jpg'),
          BannerUrl: '',
        },
        {
          BannerImg: require('assets/home/banner-5.jpg'),
          BannerUrl: '',
        },
      ],
    }
  },
  methods: {
    onBannerClick (url?: string) {
      if (url) {
        window.open(url)
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.topck-banner-swipe {
  width: 100%;
  height: 290px;
  background-color: #000;
  /deep/ {
    .van-swipe__indicator {
      width: 24px;
      height: 24px;
      transform: scale(0.5);
    }
    .van-swipe__indicators {
      padding: 0 10px;
      bottom: 8px;
    }
    .van-swipe__indicator:not(:last-child) {
      margin-right: 0;
    }
    .van-swipe__indicator--active {
      width: 80px;
      border-radius: 12px;
      margin: 0 -10px !important;
    }
  }
}
.banner-img {
  max-width: 100%;
}
</style>
